<template>
  <div class="work-write-container">
    <div class="top">
      <span>{{title}}</span>
    </div>
    <div class="content">
      <textarea name="content" v-model="content" cols="30" rows="10" PLACEHOLDER="在此编写作业内容"></textarea>
      <button class="keep" @click="submit">保存作业</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "certificate",
  data() {
    return {
      title:'',
      content:''
    };
  },
  filters: {
    dateFrom(e) {
      if (!e) return "";
      // return getdate(e);
    },
  },
  mounted() {
    this.work_id = this.$route.query.id; //作业id
    this.initAjaxMethod();
  },
  methods: {
    initAjaxMethod() {
      const toast = this.$toast.loading('加载中...');
      this.$http
        .post(this.$API.GET_MEMBER_WORKWRITEDETAIL, {
          id: this.work_id,
        })
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.title=res.notice && res.notice.title;
          }
        });
    },
    submit() {
      if(!this.content)return this.$notify({ type: "warning", message: '作业内容未编辑' });
      const toast = this.$toast.loading('加载中...');
      this.$http
        .post(this.$API.SET_MEMBER_SUBMITWORKDETAIL, { id: this.work_id,content:this.content})
        .then((res) => {
          toast.clear();
          if (res.code == 1) {
            this.$toast.success("提交成功");
            setTimeout(()=>{
              this.$router.replace({path:'/zuoye'})
            },1500)
          }
        });
    }
  },
};
</script>
<style lang="less">
.work-write-container {
  height: 100%;
  position: relative;
  .top {
        padding: 10px;
        text-align: center;
        overflow: hidden;
        color: black;
        font-size: 0.32rem;
        border-bottom: 3px solid #bbb;
    }

    .top i {
        float: left;
        color: #007AFF;
        font-size: 0.44rem;
    }

    .top span {
        width: 75%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 0.34rem;
        display: block;
        margin: 0 auto;
    }

    .content {
        background: #fff;
        font-size: 0.34rem;
        color: #000;
    }

    textarea {
        width: 100%;
    }

    .content ul {
        overflow: hidden;
        border-bottom: 1px solid #bbb;
    }

    .content li {
        width: 18%;
        float: left;
        text-align: center;
        font-size: 0.64rem;
        color: #999;
    }

    .content li:last-child {
        width: 64%;
        font-size: 0.34rem;
        text-align: right;
        padding-right: 10px;
    }

    .keep {
        width: 45%;
        padding: 8px;
        color: #fff;
        background: #F14B19;
        border: none;
        border-radius: 5px;
        margin:10px auto 10px auto;
        display: block;
    }
}
</style>